<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <!-- * 2.DOM 的体积过大会影响页面性能，假如你想在用户关闭页面时统计（计算并反馈给服务器）
 当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数，请用 JS 配合
 原生 DOM API 实现该需求（不用考虑陈旧浏览器以及在现代浏览器中的兼容性，可以使用任意
 浏览器的最新特性；不用考虑 shadow DOM）。比如在如下页面中运行后： -->
    <!-- {
    totalElementsCount: 7,
    maxDOMTreeDepth: 4,
    maxChildrenCount: 3
  } -->

    <!-- 实现效果，点击容器内的图标，图标边框变成 border 1px solid red，点击空白处重置。 -->
    <script>
        const box = document.getElementById('box');
        function isIcon(target) {
            return target.className.includes('icon');
        }

        box.onclick = function (e) {
            e.stopPropagation();
            const target = e.target;
            if (isIcon(target)) {
                target.style.border = '1px solid red';
            }
        }
        const doc = document;
        doc.onclick = function (e) {
            const children = box.children;
            for (let i = 0; i < children.length; i++) {
                if (isIcon(children[i])) {
                    children[i].style.border = 'none';
                }
            }
        }
    </script>



    <!-- 手写代码实现红绿灯效果，红灯3秒，绿灯1秒，黄灯2秒，循环重复? -->
    <!-- 三个任务交替执行 -->
    <script type="text/javascript">
        function toGreen() {
            document.getElementById("light").style.background = 'green';
            setTimeout(toYellow, 3000)
        }
        function toYellow() {
            document.getElementById("light").style.background = 'yellow';
            setTimeout(toRed, 1000)
        }
        function toRed() {
            document.getElementById("light").style.background = 'red';
            setTimeout(toGreen, 2000)
        }
        toGreen();
    </script>
    <!-- way2 -->
    <script>
        (function turnColoe() {
            var that = this;
            setTimeout(function () {
                light.className = 'yellow';
                setTimeout(function () {
                    light.className = 'red';
                    setTimeout(function () {
                        light.className = 'green';
                        setTimeout(turnColoe(), 0);
                    }, 2000);
                }, 1000)
            }, 3000)
        })()
    </script>
    <!-- 是否可以改造成promise -->

    <script>
        function sleep(color, time) {
            return new Promise((resolve, reject) => {
                light.className = color;
                setTimeout(resolve, time)
            })
        }

        while (true) {
            await sleep('yellow', 1000)
            await sleep('red', 2000)
            await sleep('green', 3000)
        }

        sleep()
    </script>

    <!-- yiled -->
    <script>
        function func(color, duration) {
            return new Promise(function (resolve, reject) {
                light.style.backgroundColor = color;
                setTimeout(function () {
                    it.next();
                }, duration)
            })
        }

        function* main() {
            while (1) {
                yield func('red', 2000);
                yield func('yellow', 1000);
                yield func('green', 3000);
            }
        }

        var it = main();
        it.next();
    </script>




    <!-- 如何事件代理 监听10个li的事件 并打印innerText-->
    <script>
        window.onload = function () {
            let now = new Date()

            let ul = document.querySelector('.ul')

            // 插入模版字符串
            let str = ''
            for (let i = 0; i < 10000; i++) {
                str += `<li>${i}</li>`
            }
            ul.innerHTML = str

            // 时间代理
            ul.addEventListener('click', function (event) {
                let e = event || window.event
                let target = e.target || e.srcElement
                if (target.nodeName.toLowerCase() === 'li') {
                    console.log(target.innerHTML)
                }

            })
            console.log(new Date() - now);
        }
    </script>

</body>

</html>

<!-- https://www.jianshu.com/p/04a6e7f48b63 -->